<template>
  <div class="login-layout-bg">
    <!-- vue2 ,在template里面，必须有一个根元素 -->
    <div class="login-form-layout">
      <h3>{{ title }}</h3>
      <div>
        <input type="text" v-model="username">
      </div>
      <div>
        <input type="password" v-model="password">
      </div>
      <div>
        <button type="button" @click="login">LOGIN</button>
      </div>

    </div>
  </div>
</template>
<script>
// 每一组件，必须默认公开一个vue实例化对象
export default {
  name: 'LoginView',
  data() {
    return {
      title: '四川省智能水务管理系统',
      username: '',
      password: '',
    }
  },
  // 1 props类型验证的写法：
  props: {
    loginState: Boolean, // 直接定义props的属性名, 使用和data选项里面的属性一样使用。
  },

  // 2 直接声明要使用的props的属性名
  // props: ['loginState'],
  methods: {
    login() {
      // console.log(this.loginState); // false
      if (this.username === 'admin' && this.password === '123456') {
        // this.loginState = true; // 不能直接修改Props的属性
        this.$emit('myclick', true)
      }
    }
  }
}
</script>
<!-- lang="less": 使用less做css的预编译语言。 scoped ： 局部的样式表。-->
<style lang="less" scoped>
.login-layout-bg {
  width: 100%;
  height: 100%;
  background-image: url("./../../assets/login-bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.login-form-layout {
  width: 400px;
  height: 300px;
  background-color: #ffffff8e;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 5px;

  //&，表示当前选择器 , 可以省略
  // >, 编译位子元素选择器
  &>h3 {
    margin: 20px 0;
    font-size: 1.5rem;
  }

  //  “ ” 空格表示后代
  & input {
    width: 80%;
    height: 40px;
    margin: 20px;
    outline: 0;
    border: 1px solid gray;
    border-radius: 3px;
    text-indent: 10px;
  }

  button {
    width: 80%;
    height: 40px;
    background-color: #11a811;
    outline: 0;
    border: 0px solid gray;
    border-radius: 3px;
    cursor: pointer;
    color: white;
  }
}
</style>